<template>
  <!-- 这里是网站logo、搜索框、购物车区域 -->
  <div>
    <el-row :gutter="20">
      <!-- 商城logo -->
      <el-col :span="8">
        <div class="shoppingLogo" v-for="item in webInfo" :key="item.id">
          <el-image
            :src="imgStr(item.websiteLogoId)"
            alt=""
            style="width: 190px; height: 120px"
          ></el-image>
        </div>
      </el-col>
      <!-- 搜索框 -->
      <el-col :span="10">
        <el-input
          placeholder="请输入内容"
          v-model="queryInfo.query"
          clearable
          @clear="getCommodityList"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getCommodityList"
          ></el-button>
        </el-input>
      </el-col>
      <!-- 购物车 -->
      <el-col :span="6">
        <el-button @click="myShopping">
          <i
            class="el-icon-shopping-cart-full"
            style="font-size: 15px; color: red"
          >
            我的购物车
          </i>
        </el-button>
      </el-col>
    </el-row>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 中间部分 -->
    <div id="center">
      <!-- 商品分类 -->
      <center-all></center-all>
    </div>

    <!-- 下边部分 -->
    <div id="bottom">
      <!-- 商品页面 -->
      <our-likes :commodityList="this.commodityList"></our-likes>
    </div>
  </div>
</template>

<script>
// 商品分类
import CenterAll from "./centerAll.vue"
// 所有商品
import OurLikes from "./comRecomment.vue"

export default {
  // 组件
  components: {
    // 商品分类
    CenterAll,
    // 所有商品
    OurLikes
  },
  data () {
    return {
      // 网站信息
      webInfo: [],
      // 商品列表查询的参数
      queryInfo: {
        // 查询的参数
        query: '',
        // 查询的类型·
        queryType: 0,
        // 当前每页显示几条数据
        pageSize: 1000,
      },
      // 商品列表
      commodityList: []
    }
  },
  // 钩子
  created () {
    // 获取网站信息
    this.getWebInfo()
    // 获取商品列表
    this.getCommodityList()
  },
  // 方法
  methods: {
    // 获取网站信息
    async getWebInfo () {
      const { data: res } = await this.$http.get('WebsiteInfo')
      if (res.meta.status !== 200) {
        // 网站信息获取失败
        this.$message.error('网站信息获取失败！')
      } else {
        // 网站信息获取成功
        // 将获取到的数据赋值给webInfo数组
        this.webInfo = res.data.websiteInfo
      }
    },
    // 获取商品列表
    async getCommodityList () {
      const { data: res } = await this.$http.get('Commodities', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        // 获取商品列表失败
        return this.$message.error('商品列表获取失败！')
      } else {
        // 获取商品列表成功
        // 将返回的数据中的commodities商品列表赋值给commodityList
        this.commodityList = res.data.commodities
      }
    },
    // 网站logo
    imgStr (id) {
      return `https://api.h1234.top/files/${id}`
    },
    // 我的购物车
    myShopping () {
      this.$router.push('./cart')
    }
  }
}
</script>
<style scoped>
/* 分类导航栏css样式 */
@import url('../assets/css/main.css');

/* 商品分类层级 */
.hc_lnav {
  z-index: 10;
}

/* 所有商品部分 */
#bottom {
  width: 90%;
}

/* 商城logo */
.shoppingLogo {
  margin-left: 250px;
  margin-top: -20px;
}
</style>
